<!--分类页面-->
<template>
    <div class="line64">
        <article>
            <div class="blank pics"></div>
            <div class="leftbox">
                <div class="newblogs">
                    <BlogCotent :content="this.topic"></BlogCotent>

                </div>
            </div>
            <div class="right">
                <ul id="title">
                    <li v-for="item in title" :id="item.id" @click="click(item.id)">{{item.name}}</li>

                </ul>

            </div>
            <InfiniteLoading @infinite="infiniteHandler" ref="infiniteLoading" spinner="waveDots" id="my">
                <span slot="no-more" style="font-size: 14px; color: #566573;">~~~我也是有底线的~~~</span>
            </InfiniteLoading>
        </article>
    </div>
</template>

<script>
    import NewArticle from "./common/NewArticle";
    import BlogCotent from "./common/BlogCotent";

    export default {
        name: "Classify",
        components: {BlogCotent, NewArticle},
        data() {
            return {
                reverse: true,
                title:[],
                clickTitle: 1,
                topic:[],
                pageSize:1,
                currentPage:1,
                i:0
            }
        },
        created() {
            this.initData();
        },
        methods: {
            initData(){
                this.$axios.post("/api/label").then(res => {
                    if (res.status === 200){
                        this.title = res.data;
                        this.$nextTick(()=>{
                            this.nowTtile();
                        })
                    }
                }).catch(res => {
                });
            },
            nowTtile(){
                let attribute = document.querySelectorAll("#title>li");
                for (let attributeElement of attribute) {
                    if (attributeElement.id == this.clickTitle){

                        attributeElement.className = "choicetitle";
                    }else {
                        attributeElement.className = "";
                    }
                }
            },
            click(id){
                if (this.clickTitle === id){
                    return;
                }
                this.topic = [];
                this.clickTitle = id;
                this.nowTtile();
                this.currentPage = 1;
                this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
            },
            async infiniteHandler($state) {
                await  this.getTopic();
            },
            async getTopic(){
                await this.$axios.post(`/api/topicByLabel?pageIndex=${this.currentPage}&pageSize=${this.pageSize}&id=${this.clickTitle}`).then(res=>{
                    this.currentPage = res.data.current+1;
                    if (this.topic.length === 0){
                        this.topic = res.data.records;
                    }else {
                        this.topic = JSON.parse(JSON.stringify(this.topic)).concat(res.data.records);
                    }
                    if (res.data.records.length === 0){
                        setTimeout(()=>{
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        },500);

                    }else {
                        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                    }
                }).catch(reason => {});
            },
            topicInfo(blogId){
                let routeData = this.$router.resolve({ path: `/common/TopicInfo`,query:{id:blogId}});
                window.open(routeData.href, '_blank');
            },
        }
    }
</script>

<style scoped>

    .line64{
        min-height: 907px;
    }
    .typeTitle li {
        list-style: none;
        display: inline-block;
        margin: 10px 8px 0 0;

    }

    .leftbox {
        float: right;
    }

    .right {
        position: fixed;
        margin-left: 100px;
        margin-top: 30px;
        width: 10%;
    }

    .right > ul {
        background: white;
        text-align: center;
        border-radius: 1%;

    }

    .right > ul > li {
        height: 30px;
        padding-top: 10px;
    }

    .right > ul > li:hover {
        background-color: rgba(227, 62, 51, .2);
        cursor: pointer;
        color: orangered;
        border-radius: 4px;
    }
    .choicetitle{
        color: orangered;
    }

</style>